<template>
  <div>
    <!-- 头部 -->
    <headers title="城市列表"></headers>
    <!-- 索引 -->
    <van-index-bar :index-list="indexList" class="index-bar" :sticky="false">
      <!-- 城市列表 -->
      <div v-for="(item, index) in indexList" :key="index">
        <!-- 城市标题 -->
        <van-index-anchor :index="item">
          {{ item === '#' ? '当前城市' : item === '热' ? '热门城市' : item }}
        </van-index-anchor>
        <!-- 当前城市 -->
        <span v-if="item === '#'">
          <van-cell :title="cityName" />
        </span>
        <!-- 热门城市 -->
        <span v-else-if="item === '热'">
          <van-cell
            v-for="i in hotCity"
            :key="i.value"
            :title="i.label"
            @click="cityFn(i)"
          />
        </span>
        <!-- 其他城市 -->
        <span v-else>
          <!-- 有城市 -->
          <span v-for="obj in city" :key="obj.value">
            <van-cell
              v-if="obj.short[0].toUpperCase() === item"
              :title="obj.label"
              @click="cityFn(obj)"
            />
          </span>
          <!-- 没有城市 -->
          <span v-for="ind in noCity" :key="ind">
            <span v-if="item === ind">
              <van-cell title="暂无城市"></van-cell>
            </span>
          </span>
        </span>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import Headers from '@/components/Headers.vue'
import { areaCityAPI, areaHotAPI } from '@/api'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'City',
  components: {
    Headers
  },
  data() {
    return {
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      hotCity: [],
      city: []
    }
  },
  computed: {
    // 取出当前城市对象
    ...mapState(['myCity', 'cityName']),
    // 没有城市对应的索引
    noCity() {
      const arr = this.indexList.filter((item) => {
        const res = this.city.findIndex(
          (obj) => obj.short[0].toUpperCase() === item
        )
        return res === -1
      })
      return arr.filter((item) => {
        return item !== '#' && item !== '热'
      })
    }
  },
  created() {
    this.hotCityList()
    this.areaCity()
  },
  methods: {
    ...mapMutations(['SET_CITYID']),
    // 获取热门城市
    async hotCityList() {
      const { body } = await areaHotAPI()
      this.hotCity = body
    },
    // 获取所有城市
    async areaCity() {
      const { body } = await areaCityAPI(1)
      this.city = body
    },
    // 存储点击的城市对象
    cityFn(obj) {
      this.SET_CITYID(obj)
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
:deep(.index-bar) {
  height: calc(100vh - 45px);
  overflow: auto;
  font-size: 14px;
  .van-index-bar__sidebar {
    height: 100%;
    padding-top: 45px;
    // 索引
    .van-index-bar__index {
      flex: 1;
      margin: 5px 5px 0 -15px;
      line-height: 1.1;
      padding: unset;
      font-size: 14px;
    }
    // 高亮索引
    .van-index-bar__index--active {
      border-radius: 100%;
      background-color: #21b97a;
      color: #fff;
    }
  }
  // 标题
  .van-index-anchor {
    height: 36px;
    font-size: 14px;
    padding: 10px 15px;
    color: #999;
    line-height: 1;
  }
  // 城市列表
  .van-cell {
    padding: unset;
    .van-cell__title {
      width: 100%;
      height: 50px;
      padding: 0 15px;
      line-height: 50px;
      border-bottom: 1px solid #eee;
      font-size: 16px;
      color: #333;
      background: #fff;
      cursor: pointer;
    }
  }
}
</style>
